import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElTooltip, ElIcon } from 'element-plus'
import { ArrowDown, Plus, Connection, Delete } from '@element-plus/icons-vue'
import { defineComponent } from 'vue'
import { hasPermission } from '@/modules/common/utils/Permission.util'

export default defineComponent({
  name: 'TableActions',
  props: {
    rowData: {
      type: Object,
      required: true
    },
    onDetail: Function,
    onAdd: Function,
    onEdit: Function,
    onChangeParent: Function,
    onDelete: Function,
    onDeleteConfirm: Function
  },
  setup(props) {
    // 检查是否为虚拟节点
    const isVirtualNode = (row) => {
      return row.code?.includes('ORGANIZATION_VIRTUAL_NODE')
    }

    return () => {
      if (isVirtualNode(props.rowData)) {
        return (
          <ElTooltip content="虚拟节点不可操作" placement="top">
            <div class="table-actions">
              <ElButton size="small" disabled>详情</ElButton>
              <ElButton size="small" type="primary" disabled>编辑</ElButton>
              <ElDropdown trigger="click" placement="bottom-end" disabled>
                {{
                  default: () => (
                    <ElButton size="small" type="info" disabled>
                      更多
                      <ElIcon class="el-icon--right">
                        <ArrowDown />
                      </ElIcon>
                    </ElButton>
                  ),
                  dropdown: () => (
                    <ElDropdownMenu>
                      <ElDropdownItem disabled>
                        <ElIcon><Plus /></ElIcon>
                        <span>新增</span>
                      </ElDropdownItem>
                      <ElDropdownItem disabled>
                        <ElIcon><Connection /></ElIcon>
                        <span>修改父节点</span>
                      </ElDropdownItem>
                      <ElDropdownItem disabled divided>
                        <ElIcon><Delete /></ElIcon>
                        <span>删除</span>
                      </ElDropdownItem>
                    </ElDropdownMenu>
                  )
                }}
              </ElDropdown>
            </div>
          </ElTooltip>
        )
      }

      const handleCommand = (command) => {
        const commandMap = {
          add: () => props.onAdd?.(props.rowData),
          changeParent: () => props.onChangeParent?.(props.rowData),
          delete: () => props.onDeleteConfirm?.(props.rowData)
        }
        commandMap[command]?.()
      }

      return (
        <div class="table-actions">
          {hasPermission(['SYSTEM:AUTH:ORGANIZATION:DETAIL']) && (
            <ElButton size="small" onClick={() => props.onDetail?.(props.rowData)}>
              详情
            </ElButton>
          )}

          {hasPermission(['SYSTEM:AUTH:ORGANIZATION:UPDATE']) && (
            <ElButton size="small" type="primary" onClick={() => props.onEdit?.(props.rowData)}>
              编辑
            </ElButton>
          )}

          <ElDropdown trigger="click" onCommand={handleCommand} placement="bottom-end">
            {{
              default: () => (
                <ElButton size="small" type="info">
                  更多
                  <ElIcon class="el-icon--right">
                    <ArrowDown />
                  </ElIcon>
                </ElButton>
              ),
              dropdown: () => (
                <ElDropdownMenu>
                  {hasPermission(['SYSTEM:AUTH:ORGANIZATION:CREATE']) && (
                    <ElDropdownItem command="add">
                      <ElIcon><Plus /></ElIcon>
                      <span>新增</span>
                    </ElDropdownItem>
                  )}
                  {hasPermission(['SYSTEM:AUTH:ORGANIZATION:UPDATE_PARENT']) && (
                    <ElDropdownItem command="changeParent">
                      <ElIcon><Connection /></ElIcon>
                      <span>修改父节点</span>
                    </ElDropdownItem>
                  )}
                  {hasPermission(['SYSTEM:AUTH:ORGANIZATION:DELETE']) && (
                    <ElDropdownItem command="delete" divided>
                      <ElIcon><Delete /></ElIcon>
                      <span>删除</span>
                    </ElDropdownItem>
                  )}
                </ElDropdownMenu>
              )
            }}
          </ElDropdown>
        </div>
      )
    }
  }
})